// 当前正在执行effect的栈
const effectStack = [];

function useEffect(callback) {
  const effect = {
    execute,
    deps: new Set()
  }
  const execute = () => {
    // 重置依赖
    cleanup(effect);
    // 推入栈顶
    effectStack.push(effect);

    try {
      callback();
    } finally {
      // 出栈
      effectStack.pop();
    }
  }
  // 立刻执行一次，建立依赖关系
  execute();
}

function cleanup(effect) {
  // 将该effect订阅的所有state变化移除
  for (const dep of effect.deps) {
    dep.delete(effect);
  }
  // 将该effect依赖的所有state移除
  effect.deps.clear();
}


function useState(value) {
  // 订阅列表
  const subs = new Set();

  const getter = () => {
    // 获取当前上下文的effect
    const effect = effectStack[effectStack.length - 1];
    if (effect) {
      // 建立联系
      subscribe(effect, subs);
    }
    return value;
  }
  const setter = (nextValue) => {
    value = nextValue;
    // 通知所有订阅该state变化的effect回调执行
    for (const sub of [...subs]) {
      sub.execute();
    }
  }
  return [getter, setter];
}


function subscribe(effect, subs) {
  // 订阅关系建立
  subs.add(effect);
  // 依赖关系建立
  effect.deps.add(subs);
}


// 测试
const [name1, setName1] = useState('KaSong');
useEffect(() => console.log('谁在那儿！', name1())) 
// 打印： 谁在那儿！KaSong
setName1('KaKaSong');
// 打印： 谁在那儿！KaKaSong

// 测试
// const [name1, setName1] = useState('KaSong');
// useEffect(() => {
//   console.log(name1());
//   setName1('KaKaSong');
// }) 